<template>
  <div class="switch-back"
    :class="close?'':'back-gray'"
    :style='backStyle'
    @click='handleSwitch'
  >
    <div class="cirle" 
      :class="close?'switch-close':''"
      :style='cirleStyle'
    ></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      close: this.switchOn
    }
  },
  props: {
    switchOn: {
      type: Boolean,
      default: false
    },
    backStyle: {
      type: String,
      default: ''
    },
    cirleStyle: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleSwitch() {
      this.close = !this.close
      this.$emit('switchTo', this.close)
    }
  }
}
</script>
<style lang="less" scoped>
.switch-back{
    width: 4rem;
    height: 2rem;
    background: green;
    border-radius: 1rem;
    position: relative;
    transition: background 0.2s ease-in-out;
    .cirle{
      position: absolute;
      top: 50%;
      left: 3%;
      transform: translateY(-50%);
      width: 45%;
      height: 0;
      padding-bottom: 45%;
      border-radius: 100%;
      background: #ffffff;
      transition: left 0.2s cubic-bezier(0.4, 0.4, 0.25, 1.35)
    }
    .switch-close {
      left: 52%
    }
}
.back-gray{
  background: #cccccc
}
</style>
